<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}梦幻西游数字资产管理系统{% endblock %}</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 主题系统 CSS -->
    <link rel="stylesheet" href="/static/css/themes.css">
    <!-- 移动端优化 CSS -->
    <link rel="stylesheet" href="/static/css/mobile.css">
    
    <style>
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
            min-height: 100vh;
            /* 背景色使用主题变量 */
        }
        
        /* 导航栏 */
        .navbar {
            background: var(--sidebar-bg);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.3rem;
        }
        
        .nav-link {
            color: rgba(255,255,255,0.85) !important;
            transition: all 0.3s;
            padding: 0.5rem 1rem !important;
            margin: 0 0.2rem;
            border-radius: 6px;
        }
        
        .nav-link:hover, .nav-link.active {
            background: rgba(255,255,255,0.2);
            color: white !important;
        }
        
        /* 标签页样式 */
        .nav-tabs .nav-link {
            color: #495057 !important;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: #000 !important;
            font-weight: 600;
        }
        
        .nav-tabs .nav-link:hover {
            color: #000 !important;
        }
        
        /* 主内容区 */
        .main-content {
            padding: 2rem 0;
            min-height: calc(100vh - 120px);
        }
        
        /* 卡片 */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s;
            margin-bottom: 1.5rem;
        }
        
        .card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }
        
        .card-header {
            background: var(--bg-card);
            border-bottom: 2px solid var(--border-color);
            padding: 1.2rem 1.5rem;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-primary);
        }
        
        /* 统计卡片 */
        .stat-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 0.8rem;
            color: var(--primary-color);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        /* 按钮 - 使用主题变量 */
        .btn-primary {
            border-radius: 8px;
            padding: 0.6rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        /* 表格 */
        .table {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        
        .table thead {
            background: var(--primary-color);
            color: white;
        }
        
        .table thead th {
            border: none;
            font-weight: 500;
            padding: 1rem;
        }
        
        .table tbody tr {
            transition: background 0.2s;
        }
        
        .table tbody tr:hover {
            background: #f8f9fa;
        }
        
        /* 徽章 */
        .badge {
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-weight: 500;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1rem;
            }
            
            .stat-card {
                margin-bottom: 1rem;
            }
            
            .main-content {
                padding: 1rem 0;
            }
            
            .table {
                font-size: 0.85rem;
            }
            
            .btn {
                font-size: 0.85rem;
                padding: 0.5rem 1rem;
            }
        }
        
        /* Loading */
        .loading {
            text-align: center;
            padding: 3rem;
            color: #999;
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #999;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: #ddd;
        }
    </style>
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 移动端顶部导航栏 -->
    <div class="mobile-header" style="display: none;">
        <button class="mobile-menu-btn" id="mobileMenuBtn">
            <i class="bi bi-list"></i>
        </button>
        <div class="mobile-title">{% block mobile_title %}梦幻资管{% endblock %}</div>
        <div class="mobile-user">
            <i class="bi bi-person-circle"></i>
        </div>
    </div>
    
    <!-- 桌面端导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top sidebar">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="bi bi-sword"></i> 梦幻资管系统
            </a>
            <!-- 移动端菜单列表（直接展开，无折叠） -->
            <ul class="navbar-nav me-auto mobile-nav-list">
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="/">
                        <i class="bi bi-house-door"></i> 首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/accounts' %}active{% endif %}" href="/accounts">
                        <i class="bi bi-person-circle"></i> 账号管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/roles' %}active{% endif %}" href="/roles">
                        <i class="bi bi-people"></i> 角色管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/tasks' %}active{% endif %}" href="/tasks">
                        <i class="bi bi-list-check"></i> 任务中心
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/assets' %}active{% endif %}" href="/assets">
                        <i class="bi bi-gem"></i> 资产管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/settings' %}active{% endif %}" href="/settings">
                        <i class="bi bi-gear"></i> 系统配置
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if request.path == '/statistics' %}active{% endif %}" href="/statistics">
                        <i class="bi bi-bar-chart"></i> 数据统计
                    </a>
                </li>
                <!-- 移动端用户信息 -->
                <li class="nav-item mobile-only" style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10px; padding-top: 10px;">
                    <a class="nav-link" href="#" onclick="handleLogout(); return false;">
                        <i class="bi bi-box-arrow-right"></i> 退出登录
                    </a>
                </li>
            </ul>
                <div class="d-flex align-items-center text-white">
                    <i class="bi bi-calendar3"></i>
                    <span class="ms-2 me-3" id="currentDate"></span>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span id="usernameDisplay">{{ session.get('username', 'User') }}</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" onclick="handleLogout()">
                                <i class="bi bi-box-arrow-right me-2"></i>退出登录
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container-fluid main-content">
        {% block content %}{% endblock %}
    </div>
    
    <!-- Toast 通知容器 -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
        <div id="notification" class="toast" role="alert">
            <div class="toast-header">
                <i class="bi bi-bell-fill me-2"></i>
                <strong class="me-auto">系统通知</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body"></div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <!-- SheetJS for Excel -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <!-- 主题系统 JS -->
    <script src="/static/js/theme.js"></script>
    
    <script>
        // 显示当前日期
        function updateCurrentDate() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
        }
        updateCurrentDate();
        
        // 通知函数
        function showNotification(message, type = 'success') {
            const toast = document.getElementById('notification');
            const toastBody = toast.querySelector('.toast-body');
            toastBody.textContent = message;
            
            const toastInstance = new bootstrap.Toast(toast);
            toastInstance.show();
        }
        
        // 退出登录
        function handleLogout() {
            // 清除本地存储
            localStorage.removeItem('isLoggedIn');
            localStorage.removeItem('username');
            
            // 跳转到登出页面（清除服务器端session）
            window.location.href = '/logout';
        }
        
        // API 请求封装
        async function apiRequest(url, options = {}) {
            try {
                const response = await fetch(url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                
                const data = await response.json();
                
                if (data.code !== 200) {
                    throw new Error(data.message || '请求失败');
                }
                
                return data;
            } catch (error) {
                showNotification(error.message, 'error');
                throw error;
            }
        }
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>

